@import "../_base/_function";
.ui-select {
  .select {
    position: relative;
    &.on {
      .select-label{
        border-color: $primary-color;
        color: $primary-color;
      }
      .select-list {
        display: block;
      }
    }
  }
  .select-label {
    display: block;
    width: 100%;
    line-height: 32px;
    height: 35px;
    color: #333;
    padding: 0 2em 0 1.5em;
    border: $border-style;
    text-decoration: none;
    position: relative;
    @include ellipsis();
    &:after {
      @include triangle(top, #a0a0a0, 6px, 6px);
      position: absolute;
      right: 10px;
      top: 50%;
      margin-top: -3px;
    }
  }
  .select-list {
    width: 100%;
    position: absolute;
    background: #fff;
    top: 36px;
    left: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border: $border-style;
    z-index: 2;
    display: none;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
    max-height: 210px;
    overflow-y: auto;
    li {
      padding: 0 2.5em 0 1.5em;
      line-height: 40px;
      @include ellipsis();
      border: 1px solid transparent;
      border-top-color: #f6f6f6;
      border-bottom-color: #f6f6f6;
      cursor: pointer;
      &:hover {
        color: $primary-color;
        background: #f9f9f9;
        //border-top-color: $border-color;
        //border-bottom-color: $border-color;
      }
      &:before{
        font-family:"iconfont" !important;
        font-size:14px;
        font-style:normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        content: '\e67f';
        position: absolute;
        right: 10px;
        color: $primary-color;
        visibility: hidden;
      }
      &.on{
        &:before{
          visibility:visible;
        }
      }
    }
  }
  &.ui-error{
    .select-label{
      border-color: $error;
    }
  }
  &.ui-border-bottom{
    .select-label{
       border-color: transparent transparent $border-color transparent;
      &:after{
        @include triangle(bottom, #a0a0a0, 5px, 5px);
        border-right-color: #a0a0a0;
        margin-top: 0;
      }
    }
    .select{
      &.on {
        .select-label{
          border-color: transparent transparent $primary-color transparent;
        }
      }
    }
    &.ui-error{
      .select-label{
        border-bottom-color: $error;
      }
    }

  }
}